<!DOCTYPE html>
<html>

<head>
    <title>比赛验证 - 答题系统</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2196F3;
            --secondary-color: #1976D2;
            --background: #f8f9fa;
            --surface: #ffffff;
            --text-primary: #212121;
            --text-secondary: #757575;
            --error-color: #d32f2f;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            font-family: 'Roboto', sans-serif;
            overflow: hidden;
        }

        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        }

        .content {
            text-align: center;
            color: white;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            max-width: 600px;
            width: 90%;
        }

        .quiz-title {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .verify-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            align-items: center;
        }

        .code-input {
            width: 95%;
            padding: 1.2rem;
            font-size: 1.5rem;
            border: none;
            border-radius: 12px;
            text-align: center;
            letter-spacing: 4px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--text-primary);
            transition: transform 0.2s;
        }

        .code-input:focus {
            outline: none;
            transform: scale(1.02);
        }

        .action-button {
            padding: 1rem 2.5rem;
            font-size: 1.2rem;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50px;
            color: var(--primary-color);
            cursor: pointer;
            transition: transform 0.2s;
            width: fit-content;
        }

        .action-button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .action-button:hover:not(:disabled) {
            transform: scale(1.05);
        }

        .error-message {
            color: var(--error-color);
            margin-top: 1rem;
            font-weight: 500;
            min-height: 1.5rem;
        }

        .loading {
            position: relative;
            pointer-events: none;
        }

        .loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @media (max-width: 768px) {
            .quiz-title {
                font-size: 1.8rem;
            }
        }
    </style>
    <script src="/basic.js"></script>
</head>

<body>
    <div class="container">
        <div class="content">
            <h1 class="quiz-title" id="quizTitle">比赛验证</h1>
            <form class="verify-form" id="verifyForm">
                <input type="text" class="code-input" placeholder="请输入验证码" id="codeInput" autocomplete="off" required>
                <button type="submit" class="action-button" id="submitBtn">🔒 验证并进入</button>
                <div class="error-message" id="errorMessage"></div>
            </form>
        </div>
    </div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const quizId = urlParams.get('id');
        const form = document.getElementById('verifyForm');
        const codeInput = document.getElementById('codeInput');
        const submitBtn = document.getElementById('submitBtn');
        const errorMessage = document.getElementById('errorMessage');

        async function handleSubmit(e) {
            e.preventDefault();

            const code = codeInput.value.trim();
            if (!code) {
                showError('请输入验证码');
                return;
            }

            submitBtn.disabled = true;
            submitBtn.classList.add('loading');
            errorMessage.textContent = '';

            try {
                const response = await fetch('/quiz/verify/inviteCode', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        code,
                        quizId
                    })
                });

                const result = await response.json();
                if (response.ok) {
                    window.location.href = `notice?id=${quizId}`;
                } else {
                    showError(result.message || '验证码错误');
                }
            } catch (error) {
                showError('网络错误，请重试');
            } finally {
                submitBtn.disabled = false;
                submitBtn.classList.remove('loading');
            }
        }

        function showError(message) {
            errorMessage.textContent = message;
            codeInput.focus();
        }

        form.addEventListener('submit', handleSubmit);

        // 初始化时获取比赛名称（根据实际API调整）
        async function init() {
            try {
                const response = await fetch(`/quiz/${quizId}`);
                const { data } = await response.json();
                document.getElementById('quizTitle').textContent = `进入比赛：${data.name}`;
            } catch (error) {
                showError('比赛信息加载失败');
            }
        }

        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>

</html>